<template>
    <PopUps :bgIndex="900" :boxIndex="1001" widthMy='60%'  height-my="78%">
        <div class="popups-box">
            <div class="newOutsourcing-box">
                <div class="box-header">
                    <div class="header-top">
                        <h3>外协商基本信息</h3>
                        <i class="iconfont icon-icon-cross-empty" @click="closePopUps"></i>
                    </div>
                    <div class="formBg outsourcingInfo">
                        <ForFormCom :isDisabled="props.disabled" :Form="basicInformationForm"
                            :FormLabel="basicInformationFormLabel" />
                    </div>
                </div>
                <div class="box-floor">
                    <h3>财务信息</h3>
                    <div class="formBg">
                        <ForFormCom :isDisabled="props.disabled" :Form="financeForm" :FormLabel="financeFormLabel" />
                    </div>
                </div>
                <div class="attn-itme box-main">
                    <h3>业务情况</h3>
                    <div class="formBg">
                        <ForFormCom :isDisabled="props.disabled" :Form="attnForm" :FormLabel="attnFormLabel"
                            :className="'businessBox'" />
                    </div>
                </div>
                <div class="btn">
                    <el-button type="primary" @click="onSubmit" class="submit" v-if="!props.disabled">{{
                        props.popTitle.slice(0, 2) }}</el-button>
                    <el-button @click="closePopUps" class="reset">取消</el-button>
                </div>
            </div>
        </div>
    </PopUps>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import ForFormCom from '@/components/ForFormCom/index'
import { ElMessage } from 'element-plus'
import PopUps from '@/components/My/PopUps';
import { appInsertOutsourceApi,updateOutsourceApi } from '@/api/outsourcing'
import { forInValueFn } from '@/hook/forIn'

const { forInValue } = forInValueFn()
const props = defineProps(['popTitle', 'disabled', 'PopData', 'defindFlag','disabled'])
const emit = defineEmits(['closePopUps', 'getoutboundOrderData'])
/**         基本信息         **/
// 表单绑定属性名
const basicInformationForm = ref(
    {
        outsourcingId: '后台生成',   // 外协商编号
        outsourcingName: '', // 外协商名称
        outsourcingType: '', // 外协商类别
        outsourcingRank: '', // 外协商等级
        province: '',        // 所在省份
        region: '',          // 所在地区
        industry: '',        // 所属行业
        contactPerson: '',          // 联系人
        officePhone: '',     // 办公电话
        phoneNumber: '',     // 手机号码
        firmAddress: '',     // 公司地址
        gender: '',              // 性别
    }
)
// 表单数据标题
const basicInformationFormLabel = ref([
    {
        name: 'outsourcingId',
        label: '外协商编号',
        disabled: true,
    },
    {
        name: 'outsourcingName',
        label: '外协商名称',
        required: true
    },
    {
        name: 'outsourcingType',
        label: '外协商类别',
        required: true,
        type: 'select',
        client: [
            {
                label: '供应商',
                value: '1'
            },
        ]
    },
    {
        name: 'outsourcingRank',
        label: '外协商等级',
        required: true,
        type: 'select',
        client: [
            {
                label: 'A级',
                value: 'A级'
            },
            {
                label: 'B级',
                value: 'B级'
            },
            {
                label: 'C级',
                value: 'C级'
            },
            {
                label: 'D级',
                value: 'D级'
            }
        ]
    },
    {
        name: 'province',
        label: '所在省份'
    },
    {
        name: 'region',
        label: '所在地区'
    },
    {
        name: 'industry',
        label: '所属行业'
    },
    {
        name: 'contactPerson',
        label: '联系人'
    },
    {
        name: 'officePhone',
        label: '办公电话'
    },
    {
        name: 'phoneNumber',
        label: '手机号码'
    },
    {
        name: 'firmAddress',
        label: '公司地址'
    },
    {
        name: 'gender',
        label: '性别',
        type: 'radio',
        client: [
            {
                label: '男',
                value: '男'
            },
            {
                label: '女',
                value: '女'
            },
        ]
    },
])

/**         财务信息         **/
// 表单绑定属性名
const financeForm = ref({
    depositBank: '',    // 开户银行
    address: '',        // 地址
    accountName: '',    // 账户名称
    bankAccount: '',    // 银行账号
    taxpayerIdentificationNumber: '',   // 纳税人识别号
    monthlyBillingDate: '', // 每月结算日期
})
// 表单数据标题
const financeFormLabel = ref([
    {
        name: 'depositBank',
        label: '开户银行',
        required: true
    },
    {
        name: 'address',
        label: '地址',
        required: true
    },
    {
        name: 'accountName',
        label: '账户名称',
        required: true
    },
    {
        name: 'bankAccount',
        label: '银行账号',
        required: true
    },
    {
        name: 'taxpayerIdentificationNumber',
        label: '纳税人识别号',
    },
    {
        name: 'monthlyBillingDate',
        label: '每月结算日期',
    },
])
/**         业务情况         **/
// 表单绑定属性名
const attnForm = ref({
    cooperation: '', // 合作情况简介
    attn: ''   // 经办人
})
// 表单数据标题
const attnFormLabel = ref([
    {
        name: 'cooperation',
        label: '合作情况简介',
        type: 'textarea',
        itemClassName: 'textareaName'
    },
    {
        name: 'attn',
        label: '经办人',
        itemClassName: 'attnName'
    },
])
// 提交
const onSubmit = async () => {
    let { outsourcingName, outsourcingType, outsourcingRank } = basicInformationForm.value
    let { depositBank, address, accountName, bankAccount } = financeForm.value
    if (outsourcingName && outsourcingType && outsourcingRank && depositBank && address && accountName && bankAccount) {
        let data = basicInformationForm.value
        let data1 = Object.assign(financeForm.value, attnForm.value)
        let params = Object.assign(data, data1)
        if(props.popTitle.slice(0, 2) == '修改'){
            // console.log(basicInformationForm.value.outsourcingId);
            let res = await updateOutsourceApi(params)
            basicInformationForm.value.outsourcingId = '后台生成'
            let { code, msg } = res
                if (code == 200) {
                    emit('getoutboundOrderData')
                    closePopUps()
                    ElMessage({
                        type: 'success',
                        message: msg,
                    })
                }
         
        }else{
         basicInformationForm.value.outsourcingId = ''
            let res = await appInsertOutsourceApi(params)
            basicInformationForm.value.outsourcingId = '后台生成'
            let { code, msg } = res
            try {
                if (code == 200) {
                    emit('getoutboundOrderData')
                    closePopUps()
                    ElMessage({
                        type: 'success',
                        message: msg,
                    })
                }
            } catch {
    
            }
        }
    } else {
        ElMessage({
            message: '提交失败，需要填写必填项',
            type: 'warning',
        })
    }
}
// 取消
const closePopUps = () => {
    emit('closePopUps')
}
// 数据回显
const assignmentFun = () => {
    forInValue(basicInformationForm, props.PopData)
    forInValue(financeForm, props.PopData)
    forInValue(attnForm, props.PopData)
}
onMounted(() => {
    // 数据回显
    if (!props.defindFlag) {
        assignmentFun()
    }
})
</script>
<style scoped lang='scss'>
@import '@/assets/styles/mixin.scss';

.popups-box {
    padding: 0 16px;

    :deep(label) {
        @include label
    }

    :deep(.el-input__inner) {
        height: 34px;
    }

    :deep(.el-input__wrapper) {
        height: 34px;
    }

    :deep(.el-form-item__label) {
        height: 34px;
        line-height: 34px;
    }

    .outsourcingInfo {
        :deep(.el-form-item) {
            width: 220px;
        }

        :deep(label) {
            width: 100px;
            text-align: left;
        }

        :deep(.el-radio-group) {
            label {
                width: 30px;
            }
        }
    }

    .attn-itme {
        :deep(.el-form-item) {
            width: 220px;
        }
    }

    .header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        z-index: 2023;
        position: sticky;
        top: 0;
        height: 40px;
        margin-bottom: 20px;

        .iconfont {
            color: #666;
            font-size: 27px;
        }
    }

    .newOutsourcing-box {
        h3 {
            @include publicH3;
            margin: 30px;
        }

        .businessBox {
            display: flex;
            flex-direction: column;
            

            :deep(.textareaName) {
                width: 400px;
                height: 84px;

                .el-form-item__label,
                .el-form-item__content,
                .el-textarea,
                .el-textarea__inner {
                    height: 100%;
                }

                .el-form-item__label {
                    line-height: 84px;
                }
            }
        }




        .btn {
            width: 100%;
            text-align: right;
            padding: 20px 80px 15px 0px;
        }
    }
}
</style>
